<template>
  <div class="app">
    <div class="header">
      <div class="header_logo">
        <img src="@/assets/images/logo.png" alt="" />
      </div>
      <div class="header_nav">
        <div
          :class="['navlist', { active: activeIndex === index }]"
          v-for="(item, index) in navList"
          :key="item.name"
          @click="setActiveIndex(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
const activeIndex = ref();
import { useRouter } from "vue-router";

const router = useRouter();
const navList = ref([
  {
    name: "首页",
    link: "",
  },
  {
    name: "个人文章",
    link: "articles",
  },
  {
    name: "百宝箱",
    link: "",
  },
  {
    name: "作品集",
    link: "",
  },
  {
    name: "留言",
    link: "",
  },
]);
const setActiveIndex = (index, item) => {
  activeIndex.value = index;
  router.push(`/${item.link}`); // 跳转到 /about 路由
};
</script>
<style scoped lang="scss">
.app {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  .header {
    z-index: 99;
    padding: 10px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    .header_logo {
      width: 50px;
      height: 50px;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .header_nav {
      display: flex;
      margin-left: auto;
    }
    .navlist {
      font-size: 16px;
      margin: 0 20px;
      color: #fff;
      cursor: pointer;
      position: relative;
    }
    .active::after {
      content: ""; // 必须
      position: absolute;
      left: 0px;
      bottom: -15px;
      right: 0;

      width: 100%;
      height: 2px;
      background-color: aqua;
    }
  }
}
</style>
